<template>
  <div>
    <!-- 顶部面包屑导航 -->
    <breadcrumb-nav>
      <template v-slot:firstMenu>小程序管理</template>
      <template v-slot:secondMenu>首页广告</template>
    </breadcrumb-nav>
    <!-- 卡片视图-->
    <el-card class="box-card">
      <!-- 顶部添加按钮 -->
      <add-banner @addBanner="addBanner"/>
      <!-- 展示的表格 -->
      <banner-table :query-info="queryInfo" :add-banner="total" @total="setTotal"/>
      <Pagination :query-info="queryInfo" :total="total" @page-size-change="handleSizeChange"
                  @current-page-change="handlePageChange"/>
    </el-card>
  </div>
</template>

<script>
/**
 * @author 太阳当空丶赵
 * @date 2023/1/4-15:51
 * @version 1.0.0
 */
import BreadcrumbNav from "../common/BreadcrumbNav";
import Pagination from "../common/Pagination";
import BannerTable from "./appletComponents/BannerTable";
import AddBanner from "./appletComponents/AddBanner";

export default {
  name: "Banner",
  components: {BreadcrumbNav, BannerTable, AddBanner, Pagination},
  data() {
    return {
      queryInfo: {
        pageNum: 1, // 当前页
        pageSize: 5 // 每页显示多少条数据
      },
      total: 0
    }
  },
  methods: {
    setTotal(total){
      this.total = Number(total)
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize = size
    },
    handlePageChange(page) {
      this.queryInfo.pageNum = page
    },
    addBanner(){
      this.total++
    }
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 15px;
}
</style>
